<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>资产管理</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<style>
		html,
		body {
			background-color: #F5F6F6;
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 25%;
			text-align: center;
			line-height: 34px;
			height: 35px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all .3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #F5F6F6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all .3s;
		}

		ul li .content table {
			width: 100%
		}

		ul li .content td {
			border-bottom: 1px solid #DFE0E0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 10px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555
		}

		ul li:nth-child(1) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(2) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(3) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(4) .content {
			background-color: #F5F6F6;
		}

		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1ABC9C;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc
		}

		.clickfont {
			color: #72EDD1
		}
		.aa{
			width: 45%;
			height: 30px;
			float: left;
			font-size: 18px;
			background-color: #FFFFFF;
		}

		.ab{
			width: 100%;
			color: #797979;
			float: left;
		margin-top: 5px
		}
		.ab span{
			margin-left: 30px;
			font-size: 16px
		}

	</style>
</head>

<body >
	<ul>
		<li>
			<input id="tab1" type="radio" name="tab" checked>
			<label for="tab1">绿地管理</label>
			<div class="content" id="qqq"  >

				<div   v-for="(todo, index) in todos" style="background-color: rgb(240,239,244);margin-top: 10px;height: 110px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/land.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 10px"/>
						
					</div>
					<div class="aa">
							<span style="margin-top: 5px;margin-left:5px;font-size: 13px">{{todo.greedLandAdministrator.name}}</span>
					</div>
					<div class="aa" style=";text-align: right;" v-on:click="openlvdixinxi(todo.id)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情  ></span>
					</div>
					<div class="ab"><span style="font-size: 13px">绿地面积：{{todo.grossLandArea}}</span></div>
					<div class="ab">
						<span v-if="todo.conserveRank==0" style="font-size: 13px">养护级别：特级</span>
						<span v-if="todo.conserveRank==1" style="font-size: 13px">养护级别：一级</span>
						<span v-if="todo.conserveRank==2" style="font-size: 13px">养护级别：二级</span>
						<span v-if="todo.conserveRank==3" style="font-size: 13px">养护级别：三级</span>

					</div>
					<div class="ab"><span style="font-size: 13px">建成时间：{{todo.buildTime}}</span></div>
				</div>


			</div>

		</li>
		<li>
			<input id="tab2" onclick="plant()" type="radio" name="tab">
			<label for="tab2">植物管理</label>
			<div class="content" id="q1">

				<div   v-for="(tood, index) in todos" style="background-color: rgb(240,239,244);margin-top: 10px;height: 110px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/treeac.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 10px"/>
					</div>
					<div class="aa">
						<span style="margin-top: 3px;margin-left:5px;font-size: 13px">{{tood.name}}</span>
					</div>
					<div class="aa" style=";text-align: right;" v-on:click="opent(tood.id)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情  ></span>
					</div>
					<div class="ab"><span style="font-size: 13px">类型：{{tood.plantType.name}}</span></div>
					<div class="ab"><span style="font-size: 13px">别名：{{tood.alias}}</span></div>
					<div class="ab"><span style="font-size: 13px">数量：{{tood.num}}</span></div>
				</div>
			</div>
		</li>
		<li>
			<input id="tab3" onclick="plantType()" type="radio" name="tab">
			<label for="tab3">植物类型</label>
			<div class="content"  id="q3">
				<div   v-for="(toodo, index) in todos" style="background-color: rgb(240,239,244);margin-top: 10px;height: 30px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
					<!--	<img src="../../image/Encyclopedias.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 20px"/>-->
						<span style="margin-left: 15px;margin-top: 3px">{{index+1}}、</span>
					</div>
					<div class="aa" style="width: 90%">
						<span style="margin-top: 3px;margin-left:5px;font-size: 13px">{{toodo.name}}</span>
					</div>
				</div>
			</div>
		</li>
		<li>
		<li>
			<input id="tab4" onclick="hundredPlant()" type="radio" name="tab">
			<label for="tab4">植物百科</label>
			<div class="content" id="q2">
				<div   v-for="(todo, index) in todos" style="background-color: rgb(240,239,244);margin-top: 10px;height: 110px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/book.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 10px"/>
					</div>
					<div class="aa">
						<span style="margin-top: 3px;margin-left:5px;font-size: 13px">{{todo.name}}</span>
					</div>
					<div class="aa" style=";text-align: right;" v-on:click="hundredPlant1(todo.id)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情  ></span>
					</div>
					<div class="ab"><span  style="font-size: 13px">	植物类型： {{todo.plantType.name}}</div>
					<div class="ab"><span style="font-size: 13px">科属：{{todo.genus}}</span></div>
					<div class="ab"><span  style="font-size: 13px">别称:{{todo.alias}}</span></div>
				</div>


			</div>
		</li>
	</ul>
</body>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript">
	apiready = function () {
		api.setRefreshHeaderInfo(
			{
				visible: true,
				bgColor: "rgba(0,0,0,0)",
				textColor: "#666",
				textDown: "下拉刷新",
				textUp: "释放刷新",
			},
			function (ret, err) {
				window.location.reload();
				api.refreshHeaderLoadDone();
			}
		);
		var areaid = $api.getStorage('selectpor').id

		//项目id
		var proid = $api.getStorage('userSession').data.proId;

		//绿地管理
		var app = new Vue({
			el: '#qqq',
			data: {
				todos: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/greedLand/list.json",
					data: {
						areaid: areaid,
						proid: proid,
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							//alert(JSON.stringify(result));
							//var url="http://192.168.43.43:8090/kaizouba/"+result.data[i].picture;
							//alert(url)
							app.todos.push(result.data[i])
							//app.todos.push(url)
							//alert(1);
						}
					}
				});
			}
		})
	};
	//植物管理
	function plant() {
		//片区id
		var areaid = $api.getStorage('selectpor').id
		//项目id
		var proid = $api.getStorage('userSession').data.proId;
		//企业id
		var enterpriseid = $api.getStorage('userSession').data.enterprise.id;
		var app1 = new Vue({
			el: '#q1',
			data: {
				todos: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/plant/lists.json",
					data: {
						areaid: areaid,
						proid: proid,
						enterpriseid: enterpriseid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							app1.todos.push(result.data[i])
						}
					}
				});
			}
		})
	}

	//植物详情
	function opent(id) {
		api.openWin({
			name: 'xxxxx',
			url: '../detailed/zhiwutongji_window.html',
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}

	//植物百科
	function hundredPlant() {
		//企业id
		var enterpriseid = $api.getStorage('userSession').data.enterprise.id;
		var app2 = new Vue({
			el: '#q2',
			data: {
				todos: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/plantencyclopedias/list.json",
					data: {
						enterpriseid: enterpriseid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							app2.todos.push(result.data[i])
						}
					}
				});
			}
		})
	}
	//植物类型
	function plantType() {
		//企业id
		var enterpriseid = $api.getStorage('userSession').data.enterprise.id;
		var app3 = new Vue({
			el: '#q3',
			data: {
				todos: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/planttype/list.json",
					data: {
						enterpriseid: enterpriseid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							app3.todos.push(result.data[i])
						}
					}
				});
			}
		})
	}


	//绿地详情
	function openlvdixinxi(id) {
		api.openWin({
			name: 'xxxxx',
			url: '../detailed/lvdixinxi_window.html',
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}

	//植物百科详情
	function hundredPlant1(id) {
		api.openWin({
			name: 'xxxxx',
			url: '../yanghu/zhiwubaikexinxi_window.html',
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}
</script>

</html>